<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        <!-- 注意：这不是绑定事件，如果是数据绑定确实写或者不写小括号()都可以，像这样： -->
        <!-- <button v-on:click="getFullName">点我提示信息1</button>
        <button v-on:click="getFullName()">点我提示信息2</button> -->
        <!-- 需要方法的返回值必须写小括号 -->
        methods获取姓名：<span>{{getFullName()}}</span><br><br>

        <!-- 获取计算属性不用写小括号() -->
        computed获取姓名：<span>{{fullName}}</span>
    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            firstName: "张",
            lastName: "三",
        },
        methods: {
            getFullName() {
                return this.firstName + '-' + this.lastName
            }
        },
        computed: {     // 计算属性的意义：数据绑定赋值过程中，可以进行扩展操作

            // ===完整写法===
            // fullName: {
            //     get() {     // get方法只被调用一次，然后放到缓存里，如果依赖的数据只要发生变化，就会再次调用get方法
            //         alert('get被调用了')
            //         return this.firstName + '-' + this.lastName
            //     },
            //     set(val) {  // 只要当属性被修改时，set方法被调用，浏览器控制台测试修改fullName： vm.fullName = 'abc'
            //         alert('set被调用了')
            //         this.firstName = '小猪'
            //         this.lastName = '佩奇'
            //     },
            // }

            // 计算属性简写
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>

</html>